<template>
    <div class="navigation-bar">
        <span class="initiator">
            <div class="logo-content">
                <div style="display:flex;flex-direction:row;justify-content:flex-start;align-items:center;">
                    <img src="./../assets/img/logo.png" style="height:50px;" alt="" />
                    <div class="logo-text">
                        <div>融销通</div>
                        <div style="font-size:12px;margin-top:5px;color: #666;">
                            农产品融销一体平台
                        </div>
                    </div>
                </div>

            </div>
            <div class="userin" v-if="username == ''">
                <router-link to="/login" class="login">登录</router-link>
                <span> | </span>
                <router-link to="/register" class="register">注册</router-link>
            </div>
            <div class="userin" v-else>
                {{ username }}
            </div>
        </span>
        <div class="menu-content" v-cloak>
            <el-menu background-color="#668d2f" text-color="#fff" active-text-color="#fff" mode="horizontal"
                :ellipsis="false" id="menu">
                <el-menu-item index="1" class="item" @click="toFront">首页</el-menu-item>
                <el-menu-item index="2" class="item" @click="toHomeGoods">商品货源</el-menu-item>
                <el-menu-item index="3" class="item" @click="toPurchase">求购需求</el-menu-item>
                <el-menu-item index="4" class="item" @click="toKnowLedge">农业知识</el-menu-item>
                <el-menu-item index="5" class="item" @click="toHomeGuide">专家指导</el-menu-item>
                <el-menu-item index="6" class="item">购物车</el-menu-item>
                <el-sub-menu index="7">
                    <template #title>融资申请</template>
                    <el-menu-item index="7-1">智能申请</el-menu-item>
                    <el-menu-item index="7-2">融资申请</el-menu-item>
                </el-sub-menu>
                <div class="userin" v-if="username == ''"></div>
                <el-sub-menu index="8">
                    <template #title>设置</template>
                    <el-menu-item index="8-1">个人中心</el-menu-item>
                    <el-menu-item index="8-3">用户管理</el-menu-item>
                    <el-menu-item index="8-4">商品管理</el-menu-item>
                    <el-menu-item index="8-5">关于我们</el-menu-item>
                    <el-menu-item index="8-6" @click="logout">退出</el-menu-item>
                </el-sub-menu>
            </el-menu>
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { LogoutAPI } from './../api/user.ts'

const router = useRouter()

const username = ref('')
onMounted(() => {
    let name = sessionStorage.getItem('username')
    if (name === null) {
        username.value = ''
    } else {

        username.value = name

    }
})



function logout(){
    LogoutAPI()
    .then((res) => {
        if(res.code === 200&&res.msg!==null){
          ElMessage.success(res.msg)
          localStorage.setItem("x-auth-token",'')
          localStorage.setItem("userType",'')
          localStorage.setItem("isLoggedIn",'')
          sessionStorage.setItem("username",'')
          window.location.reload()
        }
        if(res.code === 100&&res.msg!==null){
          ElMessage.error(res.msg)
        }

    })
}

function toFront(){
    router.push('/front')
}
function toHomeGoods(){
    router.push('/goods')
}
function toPurchase(){
    router.push('/purchase')
}
function toKnowLedge(){
    router.push('/knowledge')
}
function toHomeGuide(){
    router.push('/homeguide')
}
</script>
  
<style lang="less" scoped>
.navigation-bar {
    width: 100%;

    .initiator {
        width: 1100px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        color: #035D1C;
        padding: 5px 20px;

        .logo-content {
            color: #035D1C;
            text-align: center;

            .logo-text {
                margin-left: 10px;
                font-size: 16px;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                // justify-content: flex-start;
            }
        }
    }

    .menu-content {
        height: 42px;
        background-color: #668d2f !important;
    }

    .el-menu {
        width: 1100px;
        margin: 0 auto;
        height: 40px;

        .el-menu-item {
            background-color: #668d2f !important;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            margin-right: 34px;
        }

        .el-submenu {
            .template {
                background-color: #668d2f !important;
                height: 40px;
                line-height: 40px;
                font-size: 14px;
            }

            .el-submenu__title {
                line-height: 40px;
                height: 40px;
                background-color: #668d2f;
            }

            .el-menu-item {
                background-color: #668d2f !important;
                height: 40px;
                line-height: 40px;
                font-size: 14px;
            }

            background-color: #668d2f !important;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
        }
    }

    .login {
        cursor: pointer;
    }

    .register {
        cursor: pointer;
    }
}

.el-menu.el-menu--horizontal {
    border-bottom: none;
}

.menu-content /deep/ .el-submenu__title i {
    color: #fff;
}

[v-cloak] {
    display: none;
}
</style>
  